<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>树状图</title>
</head>
<body>
<script src="../node_modules/d3/build/d3.min.js"></script>
<script>
  const width = 800, height = 600;
  let svg = d3.select('body').append('svg').attr('width', width).attr('height', height);
  let tree = d3.tree().size([width, height-50])
    .separation(function (a, b) {
      return a.parent === b.parent ? 10 : 15;
    });
  // 读取json数据,异步读取
  d3.json('./data.json', function (err, data) {
    // console.log(data);
    let root = d3.hierarchy(data);
    let nodes = tree(root).descendants(), links = tree(root).links();
    console.log(nodes, links);
    // 画节点
    svg.selectAll('.node').data(nodes).enter().append('circle').classed('node', true)
      .attr('r', 5)
      .style('fill', 'orange')
      .attr('cx', function (d) {return d.x;})
      .attr('cy', function (d) {return d.y});
    svg.selectAll('text').data(nodes).enter().append('text')
      .attr('fill', 'red')
      .attr('dx', -15)
      .attr('dy', 5)
      .attr('x', function (d) {
        return d.x;
      })
      .attr('y', function (d) {
        return d.y;
      })
      .text(function (d) {
        return d.data.name.slice(0,2);
      });


    // 画线
    svg.selectAll('.line').data(links).enter().append('line').classed('line', true)
      .attr('x1', function (d) {
        return d.source.x;
      })
      .attr('y1', function (d) {
        return d.source.y;
      })
      .attr('x2', function (d) {
        return d.target.x;
      })
      .attr('y2', function (d) {
        return d.target.y;
      })
      .attr('stroke', 'black')
      .attr('stroke-width', 3);
  });


</script>

</body>
</html>